<template>
   <div class="my">
      <van-cell-group v-if="user" class="my-info">
         <van-cell class="base-info"  center :border="false">
            <van-image class="avator" slot="icon" round fit="cover" :src="currentUser.photo">
            </van-image>
            <div class= "name" slot="title">{{currentUser.name}}</div>
            <van-button class="update-btn" round size="small" to="/user/profile">编辑资料</van-button>
         </van-cell>
         <van-grid class="data-info" :border="false">
            <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                  <div class="count">123</div>
               <div class="text">头条</div>
               </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                  <div class="count">123</div>
               <div class="text">关注</div>
               </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                  <div class="count">123</div>
               <div class="text">粉丝</div>
               </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                  <div class="count">123</div>
               <div class="text">获赞</div>
               </div>
            </van-grid-item>
         </van-grid>
      </van-cell-group>
      
      <div v-else class="not-login">
        <div @click="$router.push('/login')">
            <img class="mobile" src="./手机.png" >
        </div>
        <div class="text">登录 / 注册</div>
      </div>

      <van-grid class="nav-grid mb-4" :column-num="2">
         <van-grid-item class="nav-grid-item" icon="star-o" text="收藏" />
         <van-grid-item class="nav-grid-item" icon="browsing-history-o" text="历史" />
      </van-grid>
      <van-cell title="消息通知" is-link to="/" />
      <van-cell class="mb-4" title="小智同学" is-link to="/user/chat" />
      <van-cell
       class="login-cell" 
       title="退出登录"  
       @click="outLogin"
       v-if="user"/>
   </div>
   </div>
</template>
<script>
   import { mapState } from 'vuex'
   import { getCurrentUser } from '@/api/user'
   export default {
      data() {
         return {
            currentUser:{}
         }
      },
      computed:{
         ...mapState(['user'])
      },
      created(){
         this.loadCurrentUser()
      },
      methods: {
         outLogin(){
            this.$dialog.confirm({
            title: '退出提示',
            message: '确认退出么'
            })
            .then(() => {
               // on confirm
               this.$store.commit('setUser',null)
            })
            .catch(() => {
               // on cancel
            })
         },
         async loadCurrentUser(){
            const res =await getCurrentUser()
            console.log(res);
            this.currentUser=res.data.data
         }
      }
   }
</script>
<style lang="scss" scoped>
.my{
   .my-info{
   background: url('./banner.png') no-repeat;
   background-size: cover;
   .base-info{
      box-sizing:border-box;
      height: 115px;
      background-color:unset;
      padding-top:30px;
      padding-bottom:30px;
      .avator{
         box-sizing:border-box;
         width: 66px;
         height: 66px;
         border:1px solid #fff;
         margin-right: 11px;
      }
      .name{
         font-size: 15px;
         color: #fff;
      }
      .update-btn{
         height: 16px;
         font-size: 10px;
         color:#666
      }
   }
   .data-info{
      height: 65px;
      .data-info-item{
         height: 65px;
         color:#fff;
         .text-wrap{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .count{
            font-size: 18px;
            }
            .text{
               font-size:11px;
            }
         }

      }
   }
   ::v-deep .van-grid-item__content{
      background-color:unset;
   }
}

.not-login{
   height: 180px;
   background: url("./banner.png") no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   .mobile{
      width: 66px;
      height: 66px;
   }
   .text{
      font-size: 14px;
      color:#fff
   }
}

.nav-grid{
   ::v-deep .nav-grid-item{
      height: 70px;
      .van-grid-item__icon{
         font-size: 22px;
      }
      .van-icon-star-o{
         color: red;
      }
      .van-icon-browsing-history-o{
         color:#ff9d1d
      }
      .van-grid-item__text{
         font-size:14px;
         color: #333333;

      }
   }
}

.login-cell{
   text-align:center;
   color:#d86262
}
.mb-4{
   margin-bottom: 4px;
}
}
</style>